<template>
	<div class="echart" ref="chartDom"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, defineProps, watch, nextTick } from "vue"
import * as echarts from 'echarts'

//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
const chartDom = ref()
let myChart: any = null;
const props = defineProps({
	options: Object,
})
//重绘图表函数
const resizeHandler = () => {
	myChart.resize();
}
//页面成功渲染，开始绘制图表
onMounted(() => {
	myChart = echarts.init(chartDom.value)
	myChart.setOption(props.options, true);
	//自适应不同屏幕时改变图表尺寸
	window.addEventListener('resize', resizeHandler);
})
//页面销毁前，销毁事件和实例
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeHandler)
	myChart.dispose()
})
//监听图表数据时候变化，重新渲染图表
watch(() => props.options, () => {
	myChart.setOption(props.options, true);
}, { deep: true })

</script>

<style scoped lang="scss">
.echart {
	width: 100%;
	height: 100%;
}
</style>